//2023 01.14 15:29 星期六 風

/**
 * 作用不大 可以臨時寫
 * user : 李巨松
 * purport : 從中間 到 target 的 過度
 */


/**
 * 修改 特定style标签 裏的 keyframe 一些既定參數
 * 大小 和 top left 位置
 * 
 * @param {Object} styleEl	--特定style标签
 * @param {Object} centerEl	--中間元素
 * @param {Object} targetEl	--目標元素
 */
function assembleCenterToTargetKeyframe(styleEl, centerEl, targetEl) {
	//!!!!! 初始化 必备
	// let styleElement_centerToTarget = document.getElementById("static_bos")

	//獲取 元素的 位置 和 大小 
	function getElementPositionAndSize(el) {
		let comEl = window.getComputedStyle(el)

		let x = getbodyOffsetPosition("left")
		let y = getbodyOffsetPosition("top")
		let w = comEl.width
		let h = comEl.height

		return {
			x,
			y,
			w,
			h
		}
	}

	let posiCenter = getElementPositionAndSize(centerEl)

	let posiTarget = getElementPositionAndSize(targetEl)

	function assemblePosiFromTo(a, b) {
		return `\n\t\t\t\tfrom{\n\t\t\t\t\tleft: ${a.x};\n\t\t\t\t\ttop: ${a.y};\n\t\t\t\t\twidth: ${a.w};\n\t\t\t\t\theight: ${a.h};\n\t\t\t\t}\n\t\t\t\tto{\n\t\t\t\t\tleft: ${b.x};\n\t\t\t\t\ttop: ${b.y};\n\t\t\t\t\twidth: ${b.w};\n\t\t\t\t\theight: ${b.h};\n\t\t\t\t}`
	}
	let centerToTargetKeyframe = assemblePosiFromTo(posiCenter, posiTarget)


	// changeKeyframe(styleElement_centerToTarget, centerToTargetKeyframe)
	changeKeyframe(styleEl, centerToTargetKeyframe)
}

//---------------- test ----------------

// //居中 元素的 element
// let centerEl = document.getElementById("center")

// //目標 元素的 element
// let targetEl = document.getElementById("target")

// let styleElement_centerToTarget = document.getElementById("static_bos")


// assembleCenterToTargetKeyframe(styleElement_centerToTarget,centerEl,targetEl)

//---------------- tools ----------------

/**
 * 根据 给定 keyframe 所有字段 替换 特定style标签 中的 keyframe
 * @param {Object} styleEl
 * @param {String} changedKeyframe
 */
function changeKeyframe(styleEl, changedKeyframe) {
	// console.log(styleEl);
	// console.log(changedKeyframe);
	if (styleEl.nodeName == "STYLE") {


		//keyframe 替換域 -- changeField
		let regKeyframeField = /@keyframes [^{]*? \{(?<changeField>[^]*)\}/

		//正则 执行后的 keyframe 字段 0 匹配字段 1 关键字段
		keyframeField = regKeyframeField.exec(styleEl.innerHTML)
		// console.log(keyframeField);
		// console.log(keyframeField.groups["changeField"]);

		//替换
		styleEl.innerHTML = styleEl.innerHTML.replace(keyframeField.groups["changeField"], changedKeyframe)
	}
}



/**
 * 獲取 元素的 絕對 視窗定位
 * @param {Object} el 元素對象
 * @param {Object} str ["top"||"left"]
 * @return {Number}
 */
function getbodyOffsetPosition(el, str) {
	let keys = 'offset' + str[0].toUpperCase() + str.substring(1);
	let translateDire = str == 'top' ? 'translateY' : 'translateX';
	// console.log(keys);
	let num = 0;
	let elclone = el;
	for (; elclone['offsetParent'] != null;) {
		console.log(window.getComputedStyle(elclone));
		let matrixstr = window.getComputedStyle(elclone)['transform'];
		if (matrixstr != 'none') {
			let trans = spliteMatrix(matrixstr, translateDire);
			// console.log(trans);
			num += Number(trans);
		}
		// console.log(elclone, elclone['offsetParent']);
		num += Number(elclone[keys]);
		// console.log(num);
		elclone = elclone['offsetParent'];
	}
	return num;
}
